<template>
    <div>
        <!-- 引入面包屑模块 -->
        <breadcrumb-com>
            <template #one>
                用户管理
            </template>
            <template #two>
                用户列表
            </template>
        </breadcrumb-com>
        <el-card>
            <el-row type="flex">
                <el-col>
                    <el-input placeholder="请输入内容" v-model="quertInfo.query" class="input-with-select">
                        <el-button slot="append" icon="el-icon-search" @click="getTableList"></el-button>
                    </el-input>
                    <el-button @click="addUserBtn">添加用户</el-button>
                </el-col>

            </el-row>

            <!-- 表格 -->
            <el-table :data="tableList" border style="width: 100%">
                <el-table-column type="index" label="#">
                </el-table-column>
                <el-table-column prop="username" label="姓名"></el-table-column>
                <el-table-column prop="email" label="邮箱"></el-table-column>
                <el-table-column prop="mobile" label="电话"></el-table-column>
                <el-table-column prop="role_name" label="角色"></el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="{row}">
                        <el-switch v-model="row.mg_state" @change="stausData(row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200px">
                    <template slot-scope="{row}">
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="editBtn"></el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
                        <el-button type="warning" icon="el-icon-star-off" size="mini"
                            @click="AssignRoleBtn(row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="quertInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="quertInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </el-card>
        <!-- 添加修改弹窗 -->
        <table-tree :treeList="treeList" :isHandler="isHandler"></table-tree>
        <!-- 分配角色弹窗 -->
        <roles-dialog :rolesInfo="rolesInfo" @colesBtn="colesBtn" :rolesRow="rolesRow"></roles-dialog>
    </div>
</template>

<script>
import BreadcrumbCom from '@/components/BreadcrumbCom.vue';
import { getUserApi, getUserConditionApi } from '@/api/user'
import tableTree from './components/tableTree.vue'
import rolesDialog from './components/rolesDialog.vue';
export default {
    components: { BreadcrumbCom, tableTree, rolesDialog },
    data() {
        return {
            quertInfo: {
                query: "",//查询参数
                pagenum: 1,//当前页码
                pagesize: 2,//每页条数
            },
            tableList: [],//表格数据
            total: 0,//总条数
            // 弹窗数据
            treeList: {
                isShow: false,//控制弹窗显示隐藏
                options: "add",// 状态
                title: "添加用户",//标题
            },
            isHandler: false,//控制表单显示隐藏
            rolesInfo: {
                isRolesShow: false,//控制角色弹窗显示隐藏
            },
            rolesRow: {}
        };
    },
    created() {

        this.getTableList()
    },
    methods: {
        // 点击修改按钮
        editBtn() {
            this.treeList = {
                isShow: true,//控制弹窗显示隐藏
                options: "edit",// 状态
                title: "修改用户",//标题
                isHandler: true,//控制表单显示隐藏
            }
        },
        colesBtn() {
            this.rolesInfo = {
                isRolesShow: false,//控制角色弹窗显示隐藏
            },
                this.getTableList()
        },
        async getTableList() {
            let res = await getUserApi({ ...this.quertInfo })
            this.tableList = res.users
            this.total = res.total
        },
        // 当前条数改变触发
        handleSizeChange(val) {
            this.quertInfo.pagesize = val
            this.getTableList()
        },
        // 当前页改变触发
        handleCurrentChange(val) {
            this.quertInfo.pagenum = val
            this.getTableList()
        },
        // 修改用户状态
        async stausData(row) {
            try {
                await getUserConditionApi(row)
                this.$message.success('修改用户状态成功')
            } catch (error) {
                this.$message.error('修改用户状态失败')
            }
        },
        // 点击添加用户按钮
        addUserBtn() {
            this.treeList = {
                isShow: true,//控制弹窗显示隐藏
                options: "add",// 状态
                title: "添加用户",//标题
                isHandler: false,//控制表单显示隐藏
            }
        },
        // 点击分配角色按钮
        AssignRoleBtn(row) {
            this.rolesInfo = {
                isRolesShow: true,//控制角色弹窗显示隐藏
            }
            this.rolesRow = row
        }
    }
}
</script>

<style lang="scss" scoped>
.input-with-select {
    width: 350px;
}
</style>